<template>
	<view class="">
		<SearchLink></SearchLink>
		<!-- 轮播图 -->
		<swiper indicator-dots autoplay circular indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#fff">
			<swiper-item v-for="(item, index) in swiperdata" :key="index">
				<!-- 图片去哪里找，接口 -->
				<image :src="item.image_src" mode=""></image>
			</swiper-item>
		</swiper>

		<!-- 导航 -->
		<view class="nav"><image v-for="(item, index) in catitems" :key="index" :src="item.image_src" mode=""></image></view>
		<!-- 楼层 -->
		<view class="floor">
			<view class="floor-item" v-for="(fitem, index) in floordata" :key="index">
				<image :src="fitem.floor_title.image_src" mode=""></image>
				<view class="product-list">
					<image :src="fitem.product_list[0].image_src" mode=""></image>
					<!-- 右侧渲染多了一个 -->
					<!-- vfor和v-if不能写在一起 -->
					<view class="right">
						<block v-for="(item, index) in fitem.product_list" :key="index">
							<!-- index为0不渲染 -->
							<image v-if="index" :src="item.image_src" mode=""></image>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// 引入组件
import SearchLink from '@/components/SearchLink';

export default {
	components: {
		// 组件名:组件
		SearchLink
	},
	data() {
		return {
			// 轮播图数组
			swiperdata: [],
			// 导航数组
			catitems: [],
			// 楼层数组
			floordata: []
		};
	},
	onLoad() {
		this.getSwiperdata();
		this.getCatitems();
		this.getFloordata();
	},
	methods: {
		// 请求获取楼层数据
		async getFloordata() {
			let data = await this.$request({
				url: '/api/public/v1/home/floordata'
			});
			this.floordata = data;
		},
		// 楼层请求
		async getCatitems() {
			let data = await this.$request({
				url: '/api/public/v1/home/catitems'
			});
			this.catitems = data;
		},
		// 轮播图请求
		async getSwiperdata() {
			//await修饰promise对象，返回数据相当于promise.then的形参
			let data = await this.$request({
				url: '/api/public/v1/home/swiperdata'
			});
			this.swiperdata = data;
		}
	}
};
</script>

<style lang="less">
swiper {
	height: 340rpx;
	image {
		height: 100%;
		width: 100%;
	}
}

.nav {
	height: 194rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	// justify-content: space-between;
	// justify-content: space-evenly;
	image {
		width: 128rpx;
		height: 140rpx;
	}
}

.floor-item {
	// >是子元素的意思
	> image {
		width: 100%;
		height: 88rpx;
	}
	.product-list {
		display: flex;
		padding: 20rpx 17rpx 0;
		> image {
			width: 232rpx;
			height: 386rpx;
		}
		.right {
			// 占满主轴剩余的空间
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			> image {
				width: 232rpx;
				height: 188rpx;
				margin: 0 0 10rpx 10rpx;
			}
		}
	}
}
</style>
